<template>
  <transition name="fade">
    <template v-if="visible">
      <Teleport to="body">
        <div class="dui-modal-overlay" @click="onClickBackdrop"></div>
        <div class="dui-modal-wrapper" :size="size">
          <div class="dui-modal">
            <header>
              <slot name="title"/>
              <span class="dui-modal-close" @click="close"></span>
            </header>
            <main>
              <slot name="content"/>
            </main>
            <footer>
              <dui-button theme="button" level="main" @click="confirm">确认</dui-button>
              <dui-button theme="button" level="default" @click="cancel">取消</dui-button>
            </footer>
          </div>
        </div>
      </Teleport>
    </template>
  </transition>
</template>

<script lang="ts">
import duiButton from '../Button.vue';

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    backdropClose: {
      type: Boolean,
      default: true,
    },
    size: {
      type: String,
      default: 'md'
    },
    confirm: {
      type: Function,
    },
    cancel: {
      type: Function,
    }
  },
  components: {
    duiButton,
  },
  setup (props, context) {
    const close = () => {
      context.emit('update:visible', false);
    }

    const onClickBackdrop = () => {
      if (props.backdropClose) {
        close();
      }
    }

    const confirm = () => {
      if (props.confirm?.()) {
        close();
      }
    }

    const cancel = () => {
      if (props.cancel?.()) {
        close();
      }
    }

    return { close, onClickBackdrop, confirm, cancel }
  }
}
</script>

<style lang="scss">
  @import '../../styles/util';
  $radius: 4px;

  .dui-modal {
    background: white;
    border-radius: $radius;
    box-shadow: 0 0 3px fade_out(black, 0.5);
    min-width: 15em;

    &-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: fade_out(black, 0.5);
      z-index: 10;
    }

    &-wrapper {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 11;

      &[size="sm"] {
        width: 24rem;
      }

      &[size="md"] {
        width: 36rem
      }

      &[size="lg"] {
        width: 48rem
      }
    }

    > header {
      @include flex-align(center, space-between);
      padding: 12px 16px;
      border-bottom: 1px solid $border-default;
      font-size: 20px;
    }

    > main {
      padding: 12px 16px;
    }

    > footer {
      padding: 12px 16px;
      text-align: right;
      border-top: 1px solid $border-default;
    }

    &-close {
      position: relative;
      display: inline-block;
      width: 16px;
      height: 16px;
      cursor: pointer;

      &::before,
      &::after {
        content: '';
        position: absolute;
        height: 1px;
        background: black;
        width: 100%;
        top: 50%;
        left: 50%;
      }

      &::before {
        transform: translate(-50%, -50%) rotate(-45deg);
      }

      &::after {
        transform: translate(-50%, -50%) rotate(45deg);
      }
    }

    &-close:hover {
      
      &::before,
      &::after {
        background: $brand-danger;
      }
    }
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
</style>